<extend name="Public:common"/>
<block name="main">
    <style type="text/css">
        .about3-4 dl {
            float: none;
        }

        .about1 {
            margin-bottom: 150px;
        }

        .about1 .about1-right {
            width: 850px;
            /* margin-right: -9px; */
        }

        .about3-img {

        }

        .about3-img img {
            display: block;
            max-width: 100%;
            height: auto;
            margin: 0 auto;
            object-fit: cover;
            image-rendering: -webkit-optimize-contrast;
        }

        .new-about {
            width: 96%;
            margin-left: auto;
            margin-right: auto;
        }

        .new-about-content {
            margin: 108px auto;
        }

        .new-about img {
            display: block;
        }

        .new-about-fixed {
            height: 1000px;
            width: 96%;
            margin: 0 auto;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
        }

        .new-about-content > p {
            margin-left: 47.917%;
            width: 39.739%
        }

        .new-about-content > p:nth-child(1) {
            margin-bottom: 63px;
        }

        .about3 {
            width: 100%;

        }

        .newabout3 {
            margin-top: 165px;
        }

        .about3-3 img {
            margin: 41px 0 75px;
            display: block;
        }

        .about3 .about3-right {
            margin-right: -24px;
        }

        .about3 .about3-right {
            float: none;
            margin-left: 47.917%;
            width: 50%
        }

        .about3 .about3-4 {
            display: flex;
            justify-content: ;
            flex-wrap: wrap;
            width: 80%
        }

        @media screen and (max-width: 1920px) {
            .about1 {
                margin-bottom: 96px;
            }

            .about1 .about1-right {
                width: 640px;
            }

            .new-about-content {
                margin: 108px auto;
            }

            .new-about-content > p {
                font-size: 12px;
            }

            .new-about-content p:nth-child(1) {
                margin-bottom: 56px;
            }

            .about1 .about1-right {
                margin-right: -41px;
            }

            .new-about-fixed {
                height: 800px;
            }

            .newabout3 {
                margin-top: 0px;
            }

            .about3 .about3-right {
                float: none;
                margin-left: 47.917%;
                width: 50%
            }

            .about3 .about3-4 {
                width: 80%
            }

            .about3-3 {
                margin-bottom: 25px;
                margin-top: 0px;
            }

            .about3-3 img {
                margin: 41px 0 70px;
            }
        }

        @media screen and (max-width: 1440px) {
            .new-about-content {
                margin: 80px auto 80px;
            }

            .new-about {
                margin-top: 120px;
            }
        }

        @media screen and (max-width: 1200px) {
            /* .new-about-content p{width: 640px;} */
        }

        @media screen and (max-width: 750px) {
            .about1 {
                margin-bottom: 35px;
            }

            .about1 .about1-right {
                width: 100%;
                margin-right: 0px;
            }

            .new-about {
                margin-top: 20px;
                width: 94%
            }

            .new-about-content {
                width: 100%;
                margin: 32px auto
            }

            .new-about-content > p {
                width: 100%;
                margin-left: 0px;
                margin-right: 0px;
            }

            .new-about-content p:nth-child(1) {
                margin-bottom: 26px;
            }

            .new-about-fixed {
                background-attachment: scroll !important;
                height: 200px !important;
            }

            .new-about .about3 {
                width: 100% !important;
            }

            .about3 {
                width: 94%;
                margin-top: 50px !important;
            }

            .about3-3 img {
                margin: 30px 0;
                width: 100%;
                height: auto
            }

            .about3 .about3-right {
                margin-left: 0px;
                width: 100%;
                margin-right: 0px;
            }
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#share").hover(function () {
                $(this).find(".share-list").addClass("active");
            }, function () {
                $(this).find(".share-list").removeClass("active");
            });

        });
    </script>

    <!-- 内容主体 -->
    <div class="about">
        <div class="about1 clear">
            <div class="about1-left">
                ABOUT US
            </div>
            <div class="about1-right clear">
                <div class="about1-1" style="margin-bottom: 0;">
                    {$block_data.content}
                </div>
            </div>
        </div>
        <img src="{$about.0.pic}"
             style="max-width:100%;display:block;image-rendering: -webkit-optimize-contrast;">
        <div class="new-about">
            <div class="new-about-fixed"
                 style="background-image: url({$about.1.pic});background-attachment: fixed;"></div>
            <div class="new-about-content clear">
                {$about.1.content}
            </div>
        </div>
        <for start="2" end="count($about)">
            <div class="new-about">
                <img src="{$about.$i.pic}" style="width:100%;height: auto;">
                <div class="new-about-content clear">
                    {$about.$i.content}
                </div>
            </div>
        </for>


        <div class="about3 clear newabout3">
            <div class="about3-right clear">
                <div class="about3-4 clear">
                    <foreach name="work" item="work">
                        <dl>
                            <dt><strong><span style="color: #000000;">{$work.catname}</span></strong></dt>
                            <foreach name="work.work" item="item">
                                <dd>
                                    <a href="{$item.url}"><span style="color: #000000;">{$item.title}</span></a>
                                </dd>
                            </foreach>
                        </dl>
                    </foreach>

                </div>
            </div>
        </div>
    </div>

</block>
  